<template>
	<view class="personalInfo">
		<view class="background-img-box">
			<image 
			class="background-img" 
			src="http://124.221.26.166:8080/pic/bei.jpg">
			</image>
		</view>
		<view class="top">
			<view class="personal-img-box">
				<image 
				class="personal-img" 
				src="http://124.221.26.166:8080/pic/girl.jpg">
				</image>
			</view>
			<view v-if="pages=== 'user' "  :style="style4"  class="change" @click="change">
				<text v-show="changeContent=== '关注'" class="iconfont icon-jiahao "></text> {{changeContent}}
			</view>
			<view  v-else class="change" @click="changeInfo">
				编辑资料
			</view>
		</view>
		<view class="name-box">
			<view    class="name">
				The Rong
			</view>
			<view class="douyinId">
				抖音号:6161235315353
			</view>
		</view>
		<view class="text-box">
			<view class="introduce">
				介绍内容
			</view>
			<view class="label-box">
				<view class="label">
					云南大学
				</view>
				<view class="label">
					昆明
				</view>
			</view>
			<view class="number-box">
				<view class="box">
					<text class="number">123</text>
					<text class="number-text">获赞</text>
				</view>
				<view class="box">
					<text class="number">456</text>
					<text class="number-text">关注</text>
				</view>
				<view class="box">
					<text class="number">789</text>
					<text class="number-text">粉丝</text>
				</view>
			</view>
		</view>
		<view class="add-box">
			<text class="iconfont icon-xiangji1"></text>
			<text class="add" @click="choose">添加随拍</text>
		</view>
		<view class="option-box">
			<view class="option"  :style="style1"  @click="click('作品')">
				作品
			</view>
			<view class="option"  :style="style2"  @click="click('动态')">
				动态
			</view>
			<view class="option"  :style="style3"  @click="click('喜欢')">
				喜欢
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['pages'],
		name:"personalInfo",
		data() {
			return {
				style1:'border-bottom:3px solid #F0AD4E;',
				style2:'',
				style3:'',
				style4:'background: red',
				changeContent:"关注"
			};
		},
		methods:{
			click(res){
				// console.log(res)
				switch(res){
					case "作品":
					// console.log("作品")
					this.style1="border-bottom:3px solid #F0AD4E;"
					this.style2=""
					this.style3=""
					this.$emit('change',res)
					    break;
					case "动态":
					// console.log("动态")
					this.style2="border-bottom:3px solid #F0AD4E;"
					this.style1=""
					this.style3=""
					this.$emit('change',res)
					    break;
					case "喜欢":
					// console.log("喜欢")
					this.style3="border-bottom:3px solid #F0AD4E;"
					this.style1=""
					this.style2=""
					this.$emit('change',res)
					    break;
					default:
					    break;
				}
			},
			changeInfo(){
				// 跳转页面
				uni.navigateTo({
					url:'/pages/changeInfo/changeInfo'
				})
			},
			change(){
				// 判断关注的颜色,没点关注则为颜色为红色,点关注则颜色不改变
				this.style4=this.style4 === '' ? "background:red":''
				this.changeContent=this.changeContent === '关注' ? "取消关注":"关注"
				
			},
			choose(){
				uni.chooseImage({
					count: 6, //选取图片数量，默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'],   //album 从相册选图，camera 使用相机
					success: function (res) {
						// console.log(JSON.stringify(res.tempFilePaths)); //拍照图片的路径
					}
				});
			}
		}
	}
</script>

<style>
	.personalInfo{
		width: 100%;
		background: #000000;
	}
	.background-img-box{
		width: 100%;
		padding: 0 1px;
		z-index: 19;
	}
	.background-img{
		width: 100%;
		height: 211px;
	}
	.top{
		width: 100%;
		position: absolute;
		top: 160px;
		left: 0;
		z-index: 20;
		background:#000000;
		height: 65px;
	}
	.personal-img-box{
		margin:  -25px 0 0 30px;
	}
	.personal-img{
		width: 75px;
		height: 75px;
		border-radius: 50%;
		z-index: 20;
		border: 3px solid #000000;
	}
	.change{
		position: absolute;
		top:15px;
		right: 30px;
		width: 50%;
		height: 30px;
		line-height: 30px;
		font-size: 16px;
		text-align: center;
		background: #333333;
		border-radius: 2px;
		color: #FFFFFF;
	}
	.name-box{
		margin-top: 20px;
		padding-left:  25px;
		color: #EEEEEE;
		z-index: 20;
	}
	.name{
		height: 30px;
		line-height: 30px;
		font-size: 25px;
	}
	.douyinId{
		height: 25px;
		line-height: 25px;
		font-size: 14px;
	}
	.text-box{
		padding:  0 25px;
		margin-top: 8px;
		border-top: 1px solid #222222;
	}
	.introduce{
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		color: #EEEEEE;
	}
	.label-box{
		width: 100%;
		height: 25px;
		margin-top: 5px;
		line-height: 25px;
		color: #EEEEEE;
	}
	.label{
		height: 20px;
		padding: 0 5px;
		line-height: 20px;
		font-size: 11.5px;
		background:#333333;
		color: #999999;
		float: left;
		border-radius: 1.5px;
		margin-right: 10px;
	}
	.number-box{
		width: 100%;
		height: 50px;
		line-height: 50px;
	}
	.box{
		height: 40px;
		line-height: 40px;
		float: left;
		margin-right: 5px;
	}
	.number{
		color: #FFFFFF;
		font-size: 15px;
	}
	.number-text{
		color: #999999;
		font-size: 13px;
	}
	.add-box{
		margin: 0 6%;
		height: 40px;
		line-height: 40px;
		background: #333333;
		border-radius: 3px;
		text-align: center;
		color: #FFFFFF;
	}
	.add{
		padding-left: 5px;
		font-size: 14px;
	}
	.option-box{
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-bottom: 10px ;
	}
	.option{
		width: 33%;
		height: 50px;
		line-height: 50px;
		color: #999999;
		float: left;
		text-align: center;
	}

</style>